import React, { useState, useEffect } from 'react';
import { createForm } from 'rc-form'
import {
    NavBar,
    Icon,
    List,
    InputItem,
    TextareaItem,
    Button,
    Toast,
    Accordion,
    Modal
} from 'antd-mobile';

import { GetOrderDetails, PostRefund } from "@/api/tutor/orderList.js"
import { R, VOID, ORDER_STATUSES } from "@/assets/js/dict.js"
import './orderDetails.scss';

import star_selected from "@/assets/svg/star_selected.svg"
import star_unselected from "@/assets/svg/star_unselected.svg"

const Item = List.Item;
const Brief = Item.Brief;

const myImg = (src, key) => <img src={src} key={key} className="am-icon am-icon-md"
    style={{ marginLeft: "5%" }} alt="星" />;

/*
* 历史订单的详情页
* */
function HistoryOrderDetailsOfTutor (props) {
    let [refundDetailsVisible, SetRefundDetailsVisible] = useState(false); // 退款弹框
    let [comment, setComment] = useState('');   // 退款说明
    let [OrderDetailsData, setOrderDetailsData] = useState({ students: [], parent: {}, teacher: {}, learn_hours: "[]" }); // 相当于 this.state
    let [order_id] = useState(() => {
        if (!!props.location.state) {
            return props.location.state.order_id;
        } else {
            return sessionStorage.getItem("order_id");
        }
    });

    //分数
    let [score, setScore] = useState(0);

    let [flush, goFlush] = useState("");

    function doFlush() {
        goFlush(new Date().getTime());
    }



    //分数展示
    function scoreShow () {
        let max = 5;
        let re = [];
        for (let i = 1; i <= score; i++) {
            re.push(myImg(star_selected, i));
        }
        for (let i = score + 1; i <= max; i++) {
            re.push(myImg(star_unselected, i))
        }
        return re;
    }

    function getOrderDetails () {
        GetOrderDetails({ order_id: order_id, tutor_id: JSON.parse(sessionStorage.getItem('userInfo')).id }).then(res => {

            //非异常的请求结果，交由回调处理
            if (res[R.code] === R.success) {
                let order = res[R.data];
                setOrderDetailsData(order);
                setScore(order.finish_score || 0);
            } else {
                Toast.fail(res[R.msg]);
            }
        }).catch(err => {
            console.log(err);
        });
    }

    // 退款申请
    let handleRefund = () => {
        let postData = {
            tutor_id: JSON.parse(sessionStorage.getItem('userInfo')).id,
            order_id: order_id,
            comment,
        };
        console.log('postData ----->>>', postData);
        PostRefund(postData).then(res => {
            if (res.code == '000000') {
                Toast.success('退款申请成功', 3, function () {
                    SetRefundDetailsVisible(false);
                    doFlush();
                })
            }
        }).catch(err => {
            console.error(err);
        })
    }

    function back() {
        props.history.goBack();
    }
    useEffect(getOrderDetails, [flush]);

    return (
        <div className="orderDetails">
            <div className="page-title  home-tit">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={back}
                >
                    订单详情
                </NavBar>
            </div>
            <div className="page-content  home-content">
                <div className="publish-content-piece">
                    <div className="form-box">
                        <div className="status-style">
                            订单状态:
                            <b>{OrderDetailsData.status}</b>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>
                                基本要求
                            </strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <InputItem
                                    type="text"
                                    editable="false"
                                    value={OrderDetailsData.parent_name}
                                >家长姓名</InputItem>
                                <InputItem
                                    editable="false"
                                    value={OrderDetailsData.parent_gender}

                                >家长性別</InputItem>
                                <InputItem
                                    editable="false"
                                    value={OrderDetailsData.subjects}
                                >
                                    辅导科目
                                </InputItem>
                                <InputItem
                                    editable="false"
                                    value={OrderDetailsData.class_fee ? "￥" + OrderDetailsData.class_fee / 100 : ''}
                                >
                                    课时费
                                </InputItem>
                                <InputItem
                                    editable="false"
                                    value={OrderDetailsData.brokerage_fee ? "￥" + OrderDetailsData.brokerage_fee / 100 : ''}
                                >
                                    中介费
                                </InputItem>
                                <TextareaItem
                                    title="上课地址"
                                    value={OrderDetailsData.learn_address}
                                    autoHeight
                                    editable="false"
                                />
                            </List>

                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>
                                可授课时间段
                            </strong>
                        </div>
                        <div className="form-con">
                            <Accordion defaultActiveKey="0" className="my-accordion">
                                {
                                    JSON.parse(OrderDetailsData.learn_hours).map((item, index) => {
                                        return <Accordion.Panel header={item.week} key={index}>
                                            <List className="my-list">
                                                <Item extra={item.startTime}>开始日期</Item>
                                                <Item extra={item.endTime}>结束日期</Item>
                                            </List>
                                        </Accordion.Panel>
                                    })
                                }
                            </Accordion>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>对家教老师的要求</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <TextareaItem
                                    disabled
                                    editable="false"
                                    value={OrderDetailsData.demand}
                                    clear
                                    autoHeight
                                    rows={5}
                                    count={200}
                                    placeholder={"教学的附加说明"}
                                />
                            </List>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>学生</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                {OrderDetailsData.students.map((item, index) => {
                                    return (
                                        <Item key={index}
                                            arrow="empty"
                                            multipleLine
                                            platform="cross"
                                        >
                                            名称：{item.name}
                                            <Brief> 年龄：{item.age}</Brief>
                                            <Brief> 年级：{item.grade}</Brief>
                                            <Brief> 说明：{item.note}</Brief>
                                        </Item>
                                    )
                                })}
                            </List>
                        </div>
                        <div className="form-tit" style={{display:  OrderDetailsData.status === ORDER_STATUSES.FINISHED? 'block': 'none'}}>
                            <i className="mini-block" />
                            <strong>对家教老师的服务做出评价</strong>
                        </div>
                        <div className="form-con" style={{display:  OrderDetailsData.status === ORDER_STATUSES.FINISHED? 'block': 'none'}}>
                            <List>
                                <Item arrow="empty"
                                    multipleLine
                                >
                                    <Brief> <strong style={{ color: 'black' }}>评分：</strong>{scoreShow()}</Brief>
                                </Item>
                                <TextareaItem
                                    editable={false}
                                    rows="6"
                                    disabled
                                    autoHeight
                                    clear
                                    count={200}
                                    placeholder={"对此次服务的评价..."}
                                    title="评语"
                                />
                            </List>
                        </div>

                        <Button type="warning" onClick={() => { SetRefundDetailsVisible(true) }} style={{ display: OrderDetailsData.status === ORDER_STATUSES.PAYED || OrderDetailsData.status === ORDER_STATUSES.UNSATISFACTORY || OrderDetailsData.status === ORDER_STATUSES.NO_DEAL ? 'block' : 'none' }}>申请退款</Button>
                    </div>
                </div>
            </div>

            {/* 退款说明 */}
            <Modal
                popup
                visible={refundDetailsVisible}
                animationType="slide-up"
            >
                <List>
                    <TextareaItem
                        placeholder="退款说明"
                        rows={7}
                        onChange={setComment}
                    />
                    <List.Item>
                        <Button type="primary" onClick={handleRefund}>确认</Button>
                    </List.Item>
                </List>
            </Modal>
        </div>);
}

HistoryOrderDetailsOfTutor = createForm()(HistoryOrderDetailsOfTutor);
export default HistoryOrderDetailsOfTutor;